<template>
  <el-dialog
    :model-value="show"
    title="更新Token"
    width="600px"
    append-to-body
    :before-close="handleClose"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    class="form-label-90"
    destroy-on-close
  >
    <el-form
      ref="ruleFormRef"
      :model="detailForm"
      label-width="90px"
      class="form-box"
      status-icon
      v-loading="loading"
    >
      <div class="form-box-readonly">
        <div class="form-item-readonly">
          <span class="form-label-readonly">登录：</span>
          <span class="form-value-readonly">
            <el-button
              type="primary"
              :loading="activeRow.loginLoading ? true : false"
              @click="login"
            >
              登录个号
            </el-button>
            <el-button
              type="primary"
              link
              @click="
                linkTo(
                  'https://alidocs.dingtalk.com/i/nodes/QOG9lyrgJPj6dQoxUE5woMajWzN67Mw4?utm_scene=team_space'
                )
              "
            >
              Access Token填写教程
            </el-button>
          </span>
        </div>
        <el-form-item
          label="Token："
          prop="token"
          :rules="rules('Access Token')"
        >
          <div class="form-btn-item">
            <el-input
              v-model="detailForm.token"
              maxlength="500"
              type="textarea"
              :rows="8"
              resize="none"
              show-word-limit
              placeholder="请输入Access Token"
            />
          </div>
        </el-form-item>
      </div>
    </el-form>
    <template #footer>
      <el-button
        type="primary"
        :loading="submitLoading"
        :disabled="!show || loading"
        @click="sureSave"
      >
        确定
      </el-button>
      <el-button type="info" @click="handleClose">取消</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import {
  companyResourceFb_accountUpdate_token,
  companyResourceFb_accountCheck_current_token
} from '@/api/resources';
const props = defineProps({
  show: {
    type: Boolean,
    default: false
  },
  activeRow: {
    type: Object,
    default: () => {}
  }
});
const emit = defineEmits(['reload', 'update:show', 'login']);

// 跳转
function linkTo(url) {
  window.open(url);
}

// 表单规则
function rules(name) {
  return {
    required: true,
    message: `请输入${name}`,
    trigger: 'change'
  };
}

// 关闭
function handleClose() {
  emit('update:show', false);
}

// 保存
const ruleFormRef = ref();
const submitLoading = ref(false);
async function sureSave() {
  await ruleFormRef.value?.validate();

  submitLoading.value = true;
  companyResourceFb_accountUpdate_token({
    id: props.activeRow.id,
    token: detailForm.value.token
  })
    .then(() => {
      $msg.success('更新成功');
      handleClose();
      emit('reload');
    })
    .finally(() => (submitLoading.value = false));
}

// 登录
function login() {
  emit('login');
}

// 初始化表单
const detailForm = ref({});
const loading = ref(false);
watch(
  () => props.show,
  val => {
    if (!val) return;
    // 赋默认值
    detailForm.value = { token: props.activeRow.token };
    ruleFormRef.value?.clearValidate();

    loading.value = true;
    companyResourceFb_accountCheck_current_token({
      id: props.activeRow.id
    })
      .then(res => {
        if (res.data) {
          handleClose();
          return $msg.warning('当前token有效，无需更新token信息');
        }
      })
      .finally(() => {
        loading.value = false;
      });
  }
);
</script>

<style lang="scss" scoped>
.form-item-readonly {
  width: 100%;
  align-items: center;
}
:deep(.el-form-item) {
  width: 100%;
}
</style>
